<template>
  <div class="app-container">
    <div class="top">
      <div class="operate">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="handleReport"
          v-hasPermi="['leanTask:report:add']"
          >上报改善点
        </el-button>
      </div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item>
          <el-checkbox
            v-model="queryParams.relatedVsMe"
            label="与我相关"
            border
            size="small"
            class="related-me"
            @change='handleQuery'
          ></el-checkbox>
        </el-form-item>

        <el-form-item prop="reportTaskName" class="width-150">
          <el-input
            v-model="queryParams.reportTaskName"
            placeholder="请输入改善点名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item prop="reportUserName" class="width-150">
          <el-input
            v-model="queryParams.reportUserName"
            placeholder="请输入上报人"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <organizationCascader
            :clearData="{
              factory:true,
              workshop:true,
              line:true
            }"
            :widthData ="widthData"
            :arrData="queryParams"
            :isAllList="true"
            @change="queryParamsChange"
          ></organizationCascader>
        </el-form-item>

        <el-form-item prop="status" class="width-120">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            clearable
            size="small"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleExport"
            v-hasPermi="['leanTask:report:export']"
            >导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="calc(100% - 88px - 50px)"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="改善点ID" prop="reportTaskNo"> </el-table-column>
      <el-table-column label="改善点名称" prop="reportTaskName">
        <template slot-scope="{ row }">
          <el-button type="text" @click.stop="handleLook(row)">{{row.reportTaskName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="所属工厂" prop="factoryDeptName"></el-table-column>
      <el-table-column label="所属车间" prop="workshopName"></el-table-column>
      <el-table-column label="所属产线" prop="lineName"></el-table-column>
      <el-table-column label="上报人" prop="reportName"></el-table-column>
      <el-table-column label="上报时间" prop="reportDate" min-width="140"></el-table-column>
      <el-table-column label="状态" prop="status" min-width="60">
        <template slot-scope="{ row }">
          <span>{{statusMap[row.status]}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-button v-hasPermi="['leanTask:report:approval']" v-if='row.status == 1 && row.checkUserName === name' type="text" @click="handleApproval(row)">审核</el-button>
          <template v-if='row.status == 2'>
            <el-button v-hasPermi="['leanTask:report:create']" v-if='row.checkUserName === name' type="text" @click="handleCreate(row)">创建任务</el-button>
            <el-button v-hasPermi="['leanTask:report:follow']" v-if='row.refineOrderIds && row.refineOrderIds.length && row.checkUserName === name' type="text" @click.stop="handleFollow(row)">跟踪任务</el-button>
            <el-button v-hasPermi="['leanTask:report:follow']" v-if='row.checkUserName !== name' type="text" @click.stop="handleFollow(row)">跟踪任务</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />
    <point-report-dialog
      :visible.sync="reportDialog.visible"
      :row="reportDialog.row"
      @submit-success="getList"
    />

    <point-approval-dialog
      :visible.sync="approvalDialog.visible"
      :row="approvalDialog.row"
      @submit-success="getList"
    />

    <task-add-dialog
      :visible.sync="addDialog.visible"
      :row="addDialog.row"
      @submit-success="getList"
    />

    <point-detail-dialog
      :visible.sync="pointLookDialog.visible"
      :row="pointLookDialog.row"
    />
    <task-detail-dialog
      :visible.sync="taskLookDialog.visible"
      :row="taskLookDialog.row"
    />
    <followTaskList
      :visible.sync="followTask.visible"
      :row="followTask.row"
      @selectFollow="selectFollow"
    />
  </div>
</template>
<script>
  import { reportList,reportExport,downLoad } from "@/api/leanTask/report";
  import organizationCascader from "@/views/components/organizationCascader";
  import pointReportDialog from "../components/pointReportDialog";
  import pointApprovalDialog from "../components/pointApprovalDialog";
  import taskAddDialog from "../components/taskAddDialog";
  import pointDetailDialog from "../components/pointDetailDialog";
  import taskDetailDialog from "../components/taskDetailDialog";
  import followTaskList from "../components/followTaskList";
  import {statusList,statusMap} from "../enum";
  import axios from 'axios'
  import { getToken } from '@/utils/auth'
  import { downloadFile } from '@/utils/file'
  import { parseTime } from '@/utils/eam'
  import service from "../../../utils/request";
  import { GEN_SERVER } from '@/config/baseUrl'
import {mapGetters} from "vuex";
export default {
  name: "Report",
  components: { organizationCascader,pointReportDialog,pointApprovalDialog,taskAddDialog,pointDetailDialog,taskDetailDialog,followTaskList },
  data() {
    return {
      queryParams: {
        reportTaskName: null,
        reportUserName: null,
        factoryDeptCode: null,
        factoryDeptId:null,
        workshopCode:null,
        workshopId:null,
        lineId:null,
        status:null,
        relatedVsMe:true
      },

      list: [],
      loading: false,
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      reportDialog: {
        visible: false,
        row: null,
      },
      approvalDialog: {
        visible: false,
        row: null,
      },
      addDialog:{
        visible: false,
        row: null,
      },
      pointLookDialog:{
        visible: false,
        row: null
      },
      taskLookDialog:{
        visible: false,
        row: null
      },
      followTask:{
        visible: false,
        row: null
      },
      widthData:{
        factory:"130px",
        workshop:"130px",
        line:"130px"
      },
      statusList,
      statusMap
    };
  },
  created() {
    //获取列表数据
    const result = this.getOwnFirstLine()
    this.queryParams.factoryDeptCode = result[0]?.factoryDeptCode;
    this.queryParams.factoryDeptId = result[0]?.factoryDeptId;
    this.queryParams.workshopId = result[1]?.workshopId;
    this.queryParams.workshopCode = result[1]?.workshopCode;
    this.queryParams.lineId = result[2]?.lineId;
    this.getList();
  },

  computed:{
    ...mapGetters([
      'name'
    ]),
  },

  methods: {
    getList() {
      this.loading = true;
      const { pageNum, pageSize } = this.pager;
      const {reportTaskName,reportUserName,factoryDeptCode,workshopId,lineId,factoryDeptId,status,relatedVsMe} = this.queryParams
      const params = {
        query: {
          reportTaskName,
          reportUserName,
          factoryDeptCode,
          factoryDeptId,
          workshopId,
          lineId,
          status,
          relatedVsMe
        },
        pageNum,
        pageSize,
      };
      reportList(params).then((res) => {
        this.list = res?.rows || {};
        this.pager.total = res?.total || 0;
        this.loading = false;
      })
      .catch(() => {
        this.list = [];
        this.pager.total = 0;
        this.loading = false;
      });
    },

    handleApproval(row){
      this.approvalDialog.row = row;
      this.approvalDialog.visible = true;
    },

    handleCreate(row){
      this.addDialog.row = row;
      this.addDialog.visible = true;
    },

    handleLook(row){
      this.pointLookDialog.row = row;
      this.pointLookDialog.visible = true;
    },

    handleReport() {
      this.reportDialog.row = null;
      this.reportDialog.visible = true;
    },

    handleFollow(row){
      if(!row?.refineOrderIds?.length){
        this.msgWarning("暂无相应任务");
        return
      }
      if(row?.refineOrderIds?.length == 1){
        this.taskLookDialog.row = {refineOrderId:row?.orders[0]?.id}
        this.taskLookDialog.visible = true;
      }
      if(row?.refineOrderIds?.length > 1){
        this.followTask.row = row?.orders;
        this.followTask.visible = true;
      }
    },

    selectFollow(val){
      this.followTask.visible = false;
      this.taskLookDialog.row = {refineOrderId:val};
      this.taskLookDialog.visible = true;
    },

    //导出
    handleExport() {
      this.loading = true;
      reportExport(this.queryParams).then((res) => {
        axios({
          baseURL:service.baseURL + GEN_SERVER['form-server'],
          url:'/refine/report/byte/down',
          method:"get",
          params:{id:res.msg},
          headers: {Authorization:'Bearer ' + getToken()},
          responseType: 'blob'
        }).then(data => {
          downloadFile(data.data,`改善点列表${parseTime(new Date(), '{y}{m}{d}')}.xlsx`)
        }).catch(() => {
          this.msgError("操作失败")
        })
        this.loading = false;
      })
      .catch(() => {
        this.loading = false;
      });
    },

    queryParamsChange({ factoryDeptCode, factoryDeptId,workshopId,lineId}) {
      this.queryParams.factoryDeptCode = factoryDeptCode;
      this.queryParams.factoryDeptId = factoryDeptId;
      this.queryParams.workshopId = workshopId;
      this.queryParams.lineId = lineId;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pager.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.factoryDeptId = null;
      this.queryParams.factoryDeptCode = null;
      this.queryParams.workshopId = null;
      this.queryParams.workshopCode = null;
      this.queryParams.lineId = null;
      this.handleQuery();
    }
  },
  updated() {
    if (this.$refs.Table && this.$refs.Table.doLayout) {
      this.$refs.Table.doLayout();
    }
  }
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  justify-content:space-between;
  align-items: flex-start;
  .el-form {
    width: 100%;
    text-align: right;
    ::v-deep .el-form-item__content{
      line-height:0;
    }
    .el-range-editor{
      width:100%;
    }
  }
}
.pagination-container {
  margin: 0;
}
</style>
